<script setup>
import { watch, ref, onMounted, nextTick } from 'vue';
import { forumBoard1Service } from '@/api/forumBoard.js'
import { useRouter, useRoute } from 'vue-router'
import { useForumBoardStore } from '@/store/forumBoard';

// 板块状态
const forumBoardStore = useForumBoardStore();

const router = useRouter()
const route = useRoute()

// 加载板块
const loading = ref(false)

// 是否显示二级板块
const showBoard2 = ref(false)

// 一级板块 + 对应二级板块
const formBoard = ref([])
const getFormBoard = async () => {
  // 显示加载框
  loading.value = true

  let result = await forumBoard1Service()
  formBoard.value = result.data

  // 将获取到的所有板块信息存入pinia
  forumBoardStore.setForumBoard(result.data)

  // nextTick所指定的回调会在浏览器更新DOM完毕之后再执行。
  nextTick(() => {
    // 动态为一级板块添加iconfont
    const iconfonts = document.querySelectorAll('.nav-icon')
    for (let i = 0; i < iconfonts.length; i++) {
      iconfonts[i].classList.add(iconfontname[i])
    }
  })

  // 取消加载
  loading.value = false
}

// 一级板块的iconfont
let iconfontname = [
  'icon-zonghe',
  'icon-qianduandingyi',
  'icon-houduankaifa',
  'icon-touch-fish',
  'icon-community-fill'
]

const changeBoard = (boardName1, boardName2) => {
  console.log("changeBoard", boardName1, boardName2)
  if (boardName1 == null && boardName2 == null) {
    router.push(`/`)
    return
  }

  if (boardName2 == null) {
    router.push(`/${boardName1}`)
  } else {
    router.push(`/${boardName1}/${boardName2}`)
  }
}

onMounted(async () => {
  // 获取一级板块 + 二级板块
  await getFormBoard()

  await nextTick() // 确保DOM已更新

  // 为板块添加高亮效果(在组件挂载后初始化高亮)
  highlightBoard()
})

// 为板块添加高亮效果
const highlightBoard = () => {
  nextTick(() => {
    console.log("nav-item", document.querySelectorAll('.nav-item'))

    // 先去掉原有的dom元素的active效果
    if (document.querySelector('.active') != null) {
      document.querySelector('.active').classList.remove('active')
    }

    // 再为dom元素添加高亮效果
    if (route.params.boardName1 == null) {
      // 若路由中无数据，则默认高亮“推荐”
      document.querySelectorAll('.nav-item')[0].classList.add('active')
    } else {
      let navitem = document.querySelectorAll('.nav-item')
      for (let i = 0; i < navitem.length; i++) {
        if (navitem[i].dataset.name == route.params.boardName1) {
          navitem[i].classList.add('active')
          break
        }
      }
    }
  })
}

watch(
  () => route.params,
  (newValue, oldValue) => {
    console.log("leftNav页面的路由参数：", newValue)
    if (newValue == undefined || newValue == null) {
      console.log("当前无路由")
      return
    }

    // 为板块添加高亮效果
    highlightBoard()
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="left-nav-bar" v-loading="loading">
    <ul>
      <li>
        <div class="nav-item active" @click="changeBoard(null, null)">
          <span class="nav-icon iconfont"></span>
          <span class="nav-item-text">综合</span>
        </div>
      </li>
      <li v-for="board1 in formBoard">
        <!-- 一级导航面板 -->
        <div :data-name="board1.boardName" class="nav-item" @click="changeBoard(board1.boardName, null)">
          <span class="iconfont nav-icon"></span>
          <span class="nav-item-text">{{ board1.boardName }}</span>
          <!-- 二级导航面板 -->
          <div class="board2" v-if="board1.children != null">
            <div class="board2-item" v-for="board2 in board1.children"
              @click.stop="changeBoard(board1.boardName, board2.boardName)">
              <span>{{ board2.boardName }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* 左侧导航栏 */
.left-nav-bar {
  width: 170px;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  min-height: 200px;
}

.left-nav-bar .nav-item {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 10px;

  display: flex;
  /* 文字垂直居中 */
  align-items: center;

  /* 展示二级导航面板 */
  position: relative;
}

.left-nav-bar .nav-item:hover {
  background-color: rgb(246, 246, 247);
  border-radius: 5px;
  color: #58b128;
  cursor: pointer;
}

/* 激活侧边栏 */
.left-nav-bar .active {
  /* 防止:hover效果覆盖 */
  background-color: rgba(144, 212, 113, 0.5) !important;
  border-radius: 5px;
  color: rgb(54, 104, 28) !important;
}


.left-nav-bar .nav-icon {
  font-size: 21px;
}

.left-nav-bar .nav-item-text {
  display: block;
  /* 离图标远点 */
  margin-left: 20px;
  font-size: 16px;
}

/* 二级导航面板 */
.left-nav-bar .nav-item .board2 {
  width: 200px;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  margin-left: 20px;
  z-index: 99999;

  position: absolute;
  left: 100%;
  top: 0;

  /* 默认不显示，鼠标移入才显示 */
  display: none;
}

/* 鼠标移入一级导航，才显示二级导航 */
.left-nav-bar .nav-item:hover .board2 {
  display: block;
}

.left-nav-bar .nav-item .board2::before {
  content: '';
  width: 20px;
  height: 45px;
  /* background-color: black; */
  /* transform: rotate(45deg); */

  /* 定位小三角 */
  position: absolute;
  right: 100%;
  top: 0px;
}

.left-nav-bar .nav-item .board2 .board2-item {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  color: #000;
  background-color: #fff;
  z-index: 999;
  padding-left: 20px;
}

.left-nav-bar .nav-item .board2 .board2-item:hover {
  background-color: rgb(246, 246, 247);
  border-radius: 5px;
  color: #213914;
}
</style>